<%@page import="classes.DB"%>
<%@page import="classes.LifebookUser"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>
    <center>
        <%
            String uploadedImage = "uploadIcon.png";
            LifebookUser user = (LifebookUser) session.getAttribute("user");
            Integer[] dimensions = new Integer[]{256, 256};
            if (user != null) {
                int imageID = DB.getTempImageUploadIDByUser(user.getUsername());
                if (imageID != -1) {
                    uploadedImage = "images/" + imageID;
                    dimensions = DB.getImageDimensionsFromID(imageID);
                }
            }
        %>
        <!-- Canvas -->
        <div class ="row">
            <div id="imageCanvas"></div>
        </div>
        <!-- Upload Button -->
        <div class ="row">
            <form enctype="multipart/form-data" method ="POST" action ="UploadImageServlet">
                <fieldset>
                    <input  class="btn btn-success" onChange ='this.form.submit(); sessionStorage.removeItem("pinData");' accept="image/*" name ="imageFile" type = "file">
                </fieldset>
            </form>
        </div>
        <!-- Modal -->
        <div height ="100%" id="addPinModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-body">
                <center>
                    <h4>Pin Info:</h4> <input id ="pinInfo" type="text" class ="input-xlarge" placeholder="This is my Ferrari">
                    <h4>Category:</h4> 
                    <select id = "pinCategory" class ="input-xlarge">
                        <%
                            for (String category : DB.getCategories()) {
                        %>
                        <option><%=category%></option>
                        <%                            }
                        %>
                    </select>
                    <h4>Tags (Separated by a comma):</h4> <input id ="pinTags" type="text" class ="input-xlarge" placeholder="ferrari, dynamite fishing, yolo">
                </center>
            </div>
            <div class="modal-footer">
                <center>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button class="btn btn-success" onClick ="addPin($('#pinInfo').val(),$('#pinCategory').val(),$('#pinTags').val().split(','),
                                sessionStorage.getItem('posX'),sessionStorage.getItem('posY'), false, -1); $('#addPinModal ').modal('hide');">Add Pin</button>
                </center>
            </div>
        </div>
    </div>

</center>
</body>

<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="js/bootstrap.file-input.js"></script>
<script src ="js/kinetic-v4.5.5.min.js"></script>
<script src ="js/imageTagging.js"></script>
<script>$(document).ready(function() {
                            $('input[type=file]').bootstrapFileInput();
                        });
</script>
<script defer="defer">
    var imageSource = "<%=uploadedImage%>";
    var width = <%=dimensions[0]%>;
    var height = <%=dimensions[1]%>;
    initCanvas("imageCanvas",imageSource, width, height, true);
</script>

</html>
